<template>
    <div>
        <el-upload
            class="upload-files"
            ref="uploadFile"
            drag
            :show-file-list="showFileList"
            :file-list="fileList"
            :pre-file-list="preFileList"

            :action="uploadUrl"
            :data="data"
            :multiple="multiple"
            :limit="limitNum"
            :max-size="maxSize"
            :accept="acceptType"

            :before-upload="handleBeforeUpload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-remove="handleRemove"
            :on-exceed="handleLimitNum">

            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                <!--将文件拖到此处，或<em>点击上传</em>-->
                {{$t('components.uploadFiles.DragHere')}}<em>{{$t('components.uploadFiles.clickUpload')}}</em>
                <br>{{uploadTip}}
            </div>
        </el-upload>
    </div>
</template>


<script>
    export default {
        name: 'sdUploadFiles',
        props: {
            showFileList:{
                type: Boolean,
                required: false,
                default: true
            },
            preFileList:{
                type: Array,
                required: false,
                default: function () {
                    return []
                }
            },
            uploadUrl: {
                type: String,
                required: true,
                default: ''
            },
            data: {
                type: Object,
                required: false,
                default: null
            },
            multiple: {
                type: Boolean,
                required: false,
                default: true
            },
            limitNum: {
                type: Number,
                required: false,
                default: 99
            },
            // 判断值和提示值必须对应
            maxSize: {
                type: Number,
                required: false,
                default: 2*1024*1024 // 2M = 2*1024*1024
            },
            maxSizeTip: {
                type: String,
                required: false,
                default: '2M' // 2M = 2*1024*1024
            },
            acceptType: {
                type: String,
                required: false,
                default: ''
            },
            uploadTip:{
                type: String,
                required: false,
                default: ''
            }
        },
        data () {
            return {
                fileList: []
            }
        },

        methods: {
            //上传之前,判断文件数量和大小（return false 终止上传）
            handleBeforeUpload(file){
                console.log(file);
                console.log(this.fileList);
                console.log(this.limitNum);

                //文件大小
                if(file.size > this.maxSize){
                    this.$message.error(this.$t('components.uploadFiles.maxSize').replace("MAXSIZE", this.maxSizeTip));
                    return false;
                }

                //文件类型
                if (this.acceptType){
                    let nameArr = file.name.split(".");
                    if(this.acceptType.indexOf(nameArr[nameArr.length-1]) === -1){
                        this.$message.error(this.$t('components.uploadFiles.acceptType').replace("ACCEPTTYPE", this.acceptType));
                        return false;
                    }
                }

                //文件查重
                for(let i=0; i<this.fileList.length; i++){
                    let fileItem = this.fileList[i];
                    if(file.name === fileItem.name && file.type === fileItem.raw.type && file.size === fileItem.size){
                        this.$message.error(this.$t('components.uploadFiles.fileDuplicate'));
                        return false;
                    }
                }
            },
            //超出最大数量限制
            handleLimitNum() {
                this.$message.error(this.$t('components.uploadFiles.limit').replace("LIMITNUM", this.limitNum));
            },

            //上传成功
            handleSuccess(response, file, fileList) {
                // console.log(response);
                // console.log(file);
                // 更新文件列表
                this.fileList = fileList;
                this.$emit('uploadSuccess', response, fileList);
            },
            //上传失败
            handleError(err) {
                console.log(err);
                this.$message.error(this.$t('components.uploadFiles.uploadFailed'));
                this.$emit('uploadError', err);
            },
            //删除文件
            handleRemove(file, fileList) {
                // 更新文件列表
                this.fileList = fileList;
                this.$emit('removeFile', fileList);
            },

            //清理文件列表
            clearFileList(){
                // console.log("clearFileList");
                // this.$refs.uploadFile.clearFiles();
                this.fileList = [];
            }
        },
        watch: {
            preFileList(){
                // console.log("preFileList:" + JSON.stringify(this.preFileList));
                if(this.preFileList){
                    this.fileList = this.preFileList
                }
            }
        }
    }
</script>
<style scoped>
    .upload-files{
        width: 360px;
        margin: 0 auto;
    }
    .upload-files .el-upload-list {
        width: 360px;
    }
</style>
